<template>
    <!-- 弹框默认组件 暂时不用 -->
    <div class="rx-modal" :size="size" >
        <!-- 头部 -->
        <div class="ui-table-header">
             <div class="modal-header" @mousedown="dragMouseDown($event)">
                <a class="trigger-close" mask-close>
                    X
                </a>
                <slot name="header"></slot>
            </div>
            <!-- table注释文字 -->
            <div class="ui-table-description" v-if="this.$slots.describe">
                <slot name="describe"></slot>
            </div>
            <!-- 筛选条件 -->
            <div class="ui-table-filter" v-if="this.$slots.filter">
                <slot name="filter"></slot>
            </div>
        </div>
       
        <!-- 表格内容 -->
        <div class="modal-body">
            <slot></slot>
        </div>
        <div class="modal-footer">
            <slot name="footer"></slot>
        </div>
    </div>
</template>
<script>
export default {
  name: "ui-operation",
  props: {
    size: {
      type: String,
      default: "normal"
    },
    isCenter:{
      type:Boolean,
      default:false
    }
  },
  methods: {
    /**
     * 弹框拖拽
     */
    //TODO 指令抽离
    dragMouseDown(ev) {
      var _this = this;
      var $tar = _this.$el.querySelector(".modal-header");
      $tar.style.cursor = "grabbing";
      // $tar.className += ' grabbing'
      var oDiv = $tar;
      var disX = 0;
      var disY = 0;
      var oDivLeft = 0;
      var oDivTop = 0;
      var pdisX = 0;
      var pdisY = 0;
      var oEvent = ev;
      var par = oDiv.parentNode;
      disX = oEvent.clientX;
      disY = oEvent.clientY;
      pdisX = par.offsetLeft;
      pdisY = par.offsetTop;
      var minLeft = 100 - par.clientWidth;
      if (oDiv.setCaptrue) {
        oDiv.onmousemove = mouseMove;
        oDiv.onmouseup = mouseUp;
        oDiv.setCaptrue();
      } else {
        document.onmousemove = mouseMove;
        document.onmouseup = mouseUp;
      }

      function mouseMove(ev) {
        var oEvent = ev || event;
        oDivLeft = oEvent.clientX - disX;
        oDivTop = oEvent.clientY - disY;
        par.style.marginLeft = 0;

        var left = pdisX + oDivLeft;
        var top = pdisY + oDivTop;
        top = top < 0 ? 0 : top;
        left = left < minLeft ? minLeft : left;
        par.style.left = left + "px";
        par.style.top = top + "px";
        par.style.marginTop = 0;
      }

      function mouseUp(ev) {
        var oEvent = ev || event;
        $tar.style.cursor = "grab";
        this.onmousemove = null;
        this.onmouseup = null;
        if (oDiv.releaseCapture) {
          oDiv.releaseCapture();
        }
      }
      return false;
    }
  },
  mounted() {
    // 实时计算最大高度
    var _this = this;
    Vue.nextTick(() => {
      var _$el = _this.$el;
      var bodyHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      var headerHeight = _$el.querySelector(".modal-header").clientHeight;
      var footerHeight = _$el.querySelector(".modal-footer").clientHeight;
      var contentTop = _$el.offsetTop;

      var maxSize =
        bodyHeight -
        headerHeight -
        footerHeight -
        _$el.offsetTop -
        contentTop -
        30;
      _$el.querySelector(".modal-body").style.maxHeight = maxSize + "px";
      _this.$nextTick(function (){
        if (_this.isCenter) {
          (_this.$el).style.top = bodyHeight / 2 + 'px';
          (_this.$el).style.marginTop = -((_this.$el).clientHeight / 2 + 1 )+ 'px';

        }
      })
    });
  }
};
</script>
<style lang="scss">
</style>


